/*
 * Copyright 2021 Shulie Technology, Co.Ltd
 * Email: shulie@shulie.io
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.leftTitle {
  color: #fff;
  line-height: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
}

.timeWrap {
  font-size: 16px;
  font-weight: bold;
  line-height: 32px;
  color: #fff;
}
.time {
  font-size: 25px;
}
.rightTitle {
  color: #646676;
  line-height: 16px;
}
.rightValue {
  color: #354153;
  font-size: 18px;
  font-family: HelveticaNeue-Medium, HelveticaNeue;
  font-weight: 500;
  line-height: 24px;

  :global {
    .ant-statistic-content-value-int {
      font-size: 18px;
      font-family: HelveticaNeue-Medium, HelveticaNeue;
    }
    .ant-statistic-content-suffix {
      font-size: 12px;
    }
  }
}

.flowValue {
  :global {
    .ant-statistic {
      line-height: 8px;
      color: #646676;
    }
    .ant-statistic-content-value-int,
    .ant-statistic-content-value-decimal {
      font-size: 12px;
      font-weight: 400;
      font-family: PingFangSC-Regular, PingFang SC;
    }
    .ant-statistic-content-suffix {
      font-size: 12px;
    }
  }
}

.tabsWrap {
  width: 100%;

  .moduleTabsWrapActive {
    border-bottom: 5px solid #11b6d2;
    background-color: #f3f9fa;
  }
  .moduleTabsWrap:hover {
    background-color: #f8f8f8;
    border-bottom: 5px solid transparent;
  }
  .moduleTabsWrapActive:hover {
    border-bottom: 5px solid #11b6d2;
    background-color: #f3f9fa;
  }

  .moduleTabsWrap {
    padding: 16px 30px 0;
    color: #646676;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    cursor: pointer;

    .firstLine {
      height: 16px;
      margin-bottom: 8px;
    }

    .tabTitle {
      font-size: 18px;
      font-weight: 600;
      color: #393b4f;
      height: 25px;
      margin-bottom: 16px;
    }
    .tabTitleActive {
      color: #11bbd5;
    }

    .errorColor {
      color: #fe7d61;
      font-size: 14px;
      font-weight: 500;
      font-family: HelveticaNeue-Medium, HelveticaNeue;
      margin-right: 4px;
    }

    .secondLine {
      height: 16px;
      margin-bottom: 24px;
    }
  }
}

.tabsBg {
  font-size: 12px;
  color: #acb3b9;
  border-bottom: none;
  padding-top: 0;
  margin-top: 16px;

  // :global {
  //   .ant-tabs-bar {
  //     border-bottom-color: transparent;
  //     color: rgba(172, 179, 185, 1);
  //   }
  //   .ant-tabs-nav .ant-tabs-tab {
  //     font-size: 12px;
  //     border-left: 1px solid #e0e0ea;
  //     text-align: center;
  //     // text-align: left;
  //     margin-right: 0;
  //     padding: 0px 0px;
  //     width: 70px;
  //   }
  //   .ant-tabs-nav .ant-tabs-tab:hover {
  //     color: rgba(17, 187, 213, 0.8) !important;
  //   }
  //   .ant-tabs-tab:first-child {
  //     border-left: 0;
  //   }
  //   .ant-tabs-nav .ant-tabs-tab-active {
  //     font-size: 12px;
  //     font-weight: 500;
  //     color: #11bbd5;
  //     line-height: 22px;
  //   }

  //   .ant-tabs-nav .ant-tabs-ink-bar,
  //   .ant-tabs-nav .ant-tabs-ink-bar-no-animated {
  //     background-color: transparent !important;
  //   }

  //   .ant-tabs-nav .ant-tabs-tab:hover {
  //     color: rgba(17, 187, 213, 0.8);
  //   }
  // }
}

.distributionWrap {
  width: 173px;

  .title {
    font-size: 14px;
    font-weight: 500;
    color: #4d4f61;
  }

  .distributionList {
    color: #646676;
    line-height: 16px;
    margin-top: 16px;
  }
}

.leftSelected {
  width: 235px;
  border: 1px solid #e9efff;
  display: inline-block;
  height: 100%;
  overflow-y: scroll;

  .riskTip {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(162, 166, 177, 1);
    line-height: 16px;
    text-align: center;
    padding-top: 16px;
    padding-bottom: 24px;
  }

  .appItem {
    width: 100%;
    height: 39px;
    line-height: 39px;
    padding-left: 14px;
    cursor: pointer;
  }

  .appItemActive {
    width: 100%;
    height: 39px;
    line-height: 39px;
    padding-left: 14px;
    background-color: rgba(17, 187, 213, 0.1);
    border-right: 4px solid #11bbd5;
    cursor: pointer;
  }

  .appNum {
    color: #fe7d61;
    font-weight: 600;
    float: right;
    margin-right: 16px;
  }
}

.riskMachineList {
  display: inline-block;
  width: calc(100% - 280px);
  margin-left: 16px;
  height: 100%;
  overflow-y: scroll;
}

.topWrap {
  padding: 20px 32px;
  border: 1px solid rgba(233, 239, 255, 1);

  .topWrapTitle {
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: rgba(68, 72, 84, 0.85);
    width: 28px;
  }

  .contentWrap {
    width: calc(100%-20px);
  }
}

.waterLevelWrap {
  width: 100%;
  :global {
    .ant-collapse-icon-position-right
      > .ant-collapse-item
      > .ant-collapse-header {
      background-color: #fff;
      .ant-collapse-arrow {
        transform: translateY(-7px);
      }
    }
  }

  .waterLevelValue {
    font-size: 16px;
    color: #444854;
    font-weight: 600;
  }

  .waterLevelLabel {
    font-size: 12px;
    color: #a2a6b1;
  }
}

.serviceName {
  cursor: pointer;
  display: inline-block;

  :global {
    .ant-typography,
    .ant-typography p {
      margin-bottom: 0;
    }
  }
}

.interfaceNameWrap {
  max-width: 250px;
  cursor: pointer;
  display: inline-block;
  :global {
    .ant-typography,
    .ant-typography p {
      margin-bottom: 0;
    }
  }
}

.maxRtWrap {
  padding: 4px 12px;
  display: inline-block;
  border-radius: 2px;
  border: 1px solid rgba(239, 239, 239, 1);
  cursor: pointer;
  text-align: right;
}

.requestTitle {
  display: inline-block;
  font-size: 22px;
  font-weight: 600;
  margin-top: 4px;
  color: #1e2128;
}

.requestTag {
  display: inline-block;
  padding: 0px 8px;
  margin-left: 16px;
  height: 20px;
  background: rgba(242, 253, 255, 1);
  border-radius: 2px 10px 2px 10px;
  border: 1px solid rgba(17, 187, 213, 1);
  color: #11bbd5;
  line-height: 20px;
}

.timeLineBg {
  display: inline-block;
  width: 100px;
  height: 12px;
  margin-right: 8px;
  background: transparent;
}

.timeLineWrap {
  position: absolute;
  top: 0;
  white-space: nowrap;
}

.timeLine {
  display: inline-block;
  height: 12px;
  background: #11bbd5;
  box-shadow: 0px 2px 20px 0px rgba(92, 80, 133, 0.15);
}

.failWrap {
  width: 100%;
  margin-top: 16px;
}

.defaultWrap {
  text-align: center;
  margin-top: 100px;
  margin-bottom: 80px;
}

.circle {
  display: inline-block;
  width: 72px;
  height: 72px;
  border-radius: 100%;
  background-color: #e9efff;
}

.defaultTxt {
  margin-top: 20px;
  color: #a2a6b1;
}

.detailTable {
  display: inline-block;
  :global {
    .ant-table-row-expand-icon .ant-table-row-expanded {
      display: inline-block;
    }
    .ant-table-tbody > tr > td:first-child {
      display: flex;
      height: 40px;
    }
  }
}

.missingDataTitle {
  font-size: 16px;
  font-weight: 600;
  color: #434343;
}

.louIcon {
  display: inline-block;
  color: #fff;
  width: 20px;
  height: 20px;
  background: #ea5b3c;
  border-radius: 4px;
  line-height: 20px;
  text-align: center;
  font-size: 13px;
  margin-right: 8px;
}

.missingDataSubTitle {
  color: #595959;
  font-size: 13px;
  line-height: 18px;
  margin-top: 8px;
  font-weight: 400;
}
